<template>
  <div class="page">
    <el-row>
      <div style="margin-bottom: 10px">
        <el-input v-model.trim="code" placeholder="输入设备编号进行搜索" style="width: 80%"></el-input>
        <el-button type="primary" style="width: 20%" @click="onSubmit" size="medium">查询</el-button>
      </div>
    </el-row>
    <div v-loading.fullscreen.lock="fullscreenLoading">
      <template v-if="list.length>0">
        <div ref="scroll0" class="scroll-list"
             style="white-space:nowrap;flex:1;overflow:hidden;display:flex;flex-flow:column;height: calc(100vh - 40px);">
          <div class="scroll-content">
            <div class="card_test" v-for="item in list" :key="item.id">
              <div class="text-ellipsis">{{ item.typeName }}</div>
              <div class="text-ellipsis margin-tb-sm">编号：{{ item.code ? item.code : '暂无信息' }}</div>
              <div :class="item.list.length?'text-ellipsis padding-bottom-sm own-border-bottom':'text-ellipsis'">详情：{{ item.detail ? item.detail : '暂无信息' }}</div>

              <div class="margin-top-sm flex align-center" v-for="(o, i) in item.list">
                <div class="text-ellipsis text-sm">
                  <span v-if="o.order_type===2" class="text-blue">（{{ o.order_type_name }}）</span>
                  <span v-if="o.order_type===3" class="text-red">（{{ o.order_type_name }}）</span>
                  <span v-if="o.order_type===4" class="text-orange">（{{ o.order_type_name }}）</span>
                  <span v-if="o.order_type===1 || o.order_type===8" class="text-green">（{{ o.order_type_name }}）</span>
                  <span v-if="o.order_type===5" class="text-grey">（{{ o.order_type_name }}）</span>
                  <span v-if="o.order_type===7" class="text-purple">（{{ o.order_type_name }}）</span>
                  <span>《{{ o.order_name }}》</span>
                </div>
                <div>
                  <el-tag size="mini" v-if="o.flow_status===1">已提交</el-tag>
                  <el-tag type="info" size="mini" v-else>未提交</el-tag>
                </div>
              </div>
              <div class="flex align-center justify-around margin-top" v-if="item.hasSubmit || item.hasReplace">
                <el-button size="mini" type="success" round style="width: 100px;" @click="toSubmitByDevice(item.id)" v-if="item.hasSubmit">提交</el-button>
                <el-button size="mini" type="primary" round style="width: 100px;" @click="toReplaceByDevice(item)" v-if="item.hasReplace">调整</el-button>
              </div>
            </div>
            <div v-if="isEnd" class="text-gray text-center text-df">这里到底啦</div>
          </div>
        </div>
      </template>
      <div v-if="list.length==0" style="text-align: center">
        暂无数据
      </div>
    </div>

    <el-dialog title="调整" :visible.sync="dialogFormVisible" width="80%">
      <form-device-choose ref="formDeviceChoose" :id="deviceId"></form-device-choose>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="toReplacePageByDevice">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {getBuildingDeviceList} from "@/api/app/worker";
import BScroll from "@better-scroll/core";
import Pullup from "@better-scroll/pull-up";
import FormDeviceChoose from './components/form_device_choose'

BScroll.use(Pullup);
export default {
  beforeCreate() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#FFFFFF");
  },

  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
    this.bscroll && this.bscroll.destroy();
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy();
    next();
  },
  activated() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#FFFFFF");
  },
  deactivated() {
    document.querySelector("body").removeAttribute("style");
    this.bscroll = null;
  },
  components: {
    FormDeviceChoose
  },
  data() {
    return {
      code: null,
      buildId: null,
      buildLat: null,
      buildLng: null,
      isEnd: false,
      list: [],
      listParams: {
        page: 1,
        page_size: 10
      },
      bscroll: null,
      isPullUpLoad: false,
      // isPullDownLoad: false,
      bsOptions: {
        scrollY: true,
        click: true,
        /* pullDownRefresh: {
          threshold: 90,
          stop: 10
        }, */
        pullUpLoad: true,
        bounce: {
          top: true,
          bottom: true
        }
      },

      curTab: '0',
      fullscreenLoading: false,

      dialogFormVisible: false,
      deviceId: null,
      settingId: null,
      mediaTypeId: null // 点位类型
    }
  },
  created() {
    let that = this;
    const query = that.$route.query;
    if (query.id) {
      this.buildId = query.id;
    }
    if (query.lat) {
      this.buildLat = query.lat;
    }
    if (query.lng) {
      this.buildLng = query.lng;
    }
    this.getList(false).then(
      () => {
        this.initBScroll();
      }
    );
  },
  methods: {
    showDetail(id) {
      let that = this;
      that.$router.push({
        path: '/app/view/app_view_building_device',
        query: {
          id: id
        }
      })
    },
    resetPage() {
      const that = this;
      that.list = [];
      that.isEnd = false;
      that.listParams.page = 1;
      that.listParams.page_size = 10;
      that.bscroll = null;
    },
    onSubmit() {
      this.resetPage();
      this.getList(false);
    },
    getList(add = true) {
      const that = this;
      if (!that.isEnd) {
        that.fullscreenLoading = true;
        const params = Object.assign({
          building_area_id: this.buildId,
          code: this.code
        }, this.listParams)
        return getBuildingDeviceList(params)
          .then(({
                   data: {
                     current,
                     pages,
                     total,
                     records,
                     size
                   }
                 }) => {
            that.fullscreenLoading = false;
            if (add) {
              that.list = (that.list || []).concat(records || []);
            } else {
              that.list = records || [];
            }
            that.listParams.page++;
            let flag = (total / size) <= current;
            if (flag) {
              that.isEnd = true;
            }
            that.initBScroll();
          })
      }
    },
    initBScroll() {
      const that = this;
      that.$nextTick(() => {
        const $scrollRef = that.$refs['scroll' + that.curTab];
        if (!$scrollRef) return false;
        $scrollRef.hasVerticalScroll = true;
        if (!that.bscroll) {
          that.bscroll = new BScroll($scrollRef, that.bsOptions);
          that.bscroll.on("pullingUp", () => {
            that.getList().then(() => {
              that.$nextTick(() => {
                that.bscroll.finishPullUp();
                that.bscroll.refresh();
                // this.isPullDownLoad = false;
                that.isPullUpLoad = false;
              });
            });
          });
          /* this.bscroll.on("pullingDown", () => {
            this.isEnd = false;
            this.list = [];
            this.listParams = {
              pageNum: 1,
              pageSize: 10
            };
            this.getList(1).then(() => {
              this.$nextTick(() => {
                this.bscroll.finishPullDown();
                this.bscroll.refresh();
                this.isPullDownLoad = false;
                this.isPullUpLoad = false;
              });
            });
          }); */
        } else {
          that.bscroll && that.bscroll.refresh();
        }
      });
    },
    toSubmitByDevice(id){
      this.$confirm('您确认去提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.Android.jump(id,2)
      }).catch(() => {

      });
    },
    toReplaceByDevice(row){
      this.dialogFormVisible=true
      this.deviceId = row.id
      this.mediaTypeId = row.media_type_id
    },
    toReplacePageByDevice(){
      const that = this,
        child = this.$refs.formDeviceChoose
      child.$refs.cuForm.validate((valid) => {
        if (valid) {
          var formData = child.cuForm
          this.dialogFormVisible=false
          that.$router.push({
            path: '/app/view/app_view_building_device_choose',
            query: {
              startAt: formData.work_order_info.start_at,
              endAt: formData.work_order_info.end_at,
              orderId: formData.work_order_info.work_order_id,
              // settingId: formData.setting_info.setting_id,
              buildId: that.buildId,
              lat: that.buildLat,
              lng: that.buildLng,
              deviceId:that.deviceId,
              mediaTypeId: that.mediaTypeId,
            }
          })
        } else {
          return false;
        }
      });
    },
  }
};
</script>

<style scoped type="text/css">
.card_test {
  box-shadow: 1px 1px 10px 1px #bbb;
  margin: 20px 15px;
  padding: 20px;
  min-width: 20px;
  min-height: 30px;
  border-radius: 10px;
}

.own-border-bottom {
  border-bottom: 1px dashed #dedede
}
</style>
<style scoped lang="scss">
.page {
  font-size: 14px;
}

.scroll-list {
  padding: 0 10px;

  .scroll-content {
    .card {
      display: flex;
      flex-flow: column;
      padding: 11px;
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      min-height: 74px;
      box-sizing: border-box;
      margin: 15px 0;
      box-shadow: 1px 1px 10px 1px #eee;

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        div:nth-child(1) {
          width: 100%;
          white-space: normal;
          font-size: 16px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(36, 36, 36, 1);
          line-height: 22px;
        }

        div:nth-child(2) {
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(134, 134, 134, 1);
          line-height: 17px;
        }
      }

      .tip {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 18px;
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(88, 88, 88, 1);
        line-height: 18px;
        margin-top: 11px;
      }
    }
  }
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
